<script setup>
import { ref, reactive, computed, watch, onMounted, defineProps } from "vue";
// icon
import {
  CaretDownOutlined,
  PlusOutlined,
  MinusOutlined,
  CheckOutlined,
} from "@ant-design/icons-vue";
// 组件
// 颜色选取
import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";
// 花字组件
import SubtitlesFancyFont from "./globalSubtitlesFancyFont.vue";
// 仓库
import { useStore } from "vuex";
const store = useStore();
// store.commit('INIT_SUBTITLES_DATA', subTitle.value)

const props = defineProps({
  configs_type: {
    type: String,
    default: ''
  }
})
const configs_type = computed(() => {
  return store.state.shotstack.Global_tts_config.configs_type
})

// 仓库中的字幕数据
const Global_tts_config = computed(() => {
  if (configs_type.value == "text") {
    // debugger
    return store.state.shotstack.Global_tts_config.configs.filter(ele => ele.tab_id == 'text')?.[0] || {};
  } else {
    return store.state.shotstack.Global_tts_config.configs.filter(ele => ele.tab_id == 'audio')?.[0] || {};
  }
});

// 用于展示在抽屉主页的str
const selectVoiceStr = computed(() => {
  let str = ''
  if (Global_tts_config.value?.selectVoice?.length && store.state.shotstack.Global_tts_config.isRandom == false) {
    if (Global_tts_config.value?.selectVoice.length > 1) {
      str = Global_tts_config.value.selectVoice.map(ele => ele.name).join("、");
      return {
        str,
        len: str.length
      }
    } else {
      str = Global_tts_config.value?.selectVoice?.[0]?.name
      return {
        str,
        len: str.length
      }
    }
  } else {
    return {
      str: '系统随机选择',
      len: 6
    }
  }
});

const setStore = (data) => {
  store.commit("MODIFY_GLOBALTTSCONFIG_VOICE", {
    key: data.key,
    value: data.value,
  });
};

// 修改声音数据
const volume = computed({
  get() {
    return Global_tts_config.value.volume;
  },
  set(val) {
    setStore({
      key: "volume",
      value: val,
    });
  },
});
const speed = computed({
  get() {
    return Global_tts_config.value.speed;
  },
  set(val) {
    setStore({
      key: "speed",
      value: val,
    });
  },
});
const emotion_intensity = computed({
  get() {
    return Global_tts_config.value.emotion_intensity;
  },
  set(val) {
    setStore({
      key: "emotion_intensity",
      value: val,
    });
  },
});
const start_time = computed({
  get() {
    return Global_tts_config.value.start_time / 1000;
  },
  set(val) {
    setStore({
      key: "start_time",
      value: +val * 1000,
    });
  },
});

// 是否展示配音设置
const showVoice = computed({
  get() {
    return Global_tts_config.value.showVoice
  },
  set(val) {
    setStore({
      key: "showVoice",
      value: val,
    });
  },
});

// 花字组件
const fancyFont = ref(null);

// 音色选择组件
import AudioSelection from "./Component/globalAudioSelection.vue";
const audioSelection = ref(null);

// 时间input 获取焦点和失去焦点, 修改样式
const timeInputFocus = ref(false);
const inputBlur = () => {
  timeInputFocus.value = false;
  start_time.value == null && (start_time.value = 0);
};

const isopen = ref(false)
watch(
  () => props.configs_type,
  (nv) => {
    if (nv == 'text') {
      isopen.value = true
    } else {
      isopen.value = false
    }
  },
  {
    immediate: true,
  }
);



</script>

<template>
  <div class="FontStyleComponent">
    <!-- 花字设置 -->
    <SubtitlesFancyFont ref="fancyFont" />
    <!-- 音色选择弹窗 -->
    <AudioSelection ref="audioSelection"></AudioSelection>
    <!--
     配音设置
     -->
    <!-- v-if="configs_type == text" -->
    <div class="font_settings_content" style="margin-top: 15px" v-if="isopen">
      <div class="title">
        <span>配音设置</span>
        <a-switch v-model:checked="showVoice" size="small" />
      </div>

      <div class="font_setting" v-show="showVoice">
        <div class="font_setting_item">
          <span class="font_setting_item_title">时间设置</span>
          <!-- 时间设置 -->
          <div class="setting_time" :class="{ focus_input: timeInputFocus }">
            <a-input-number @focus="timeInputFocus = true" @blur="inputBlur" v-model:value="start_time"
              style="width: 140px; padding: 0" allowClear :min="0" :max="4000" :step="0.1" :defaultValue="0"
              string-mode>
              <template #addonBefore>
                <span>第</span>
              </template>
              <template #addonAfter>
                <span>秒</span>
              </template>
            </a-input-number>
          </div>
        </div>
        <!-- 音色选择 -->
        <div class="font_setting_item" style="margin-top: 20px">
          <span class="font_setting_item_title">音色选择</span>
          <a-tooltip placement="top">
            <template #title>
              <span>{{ selectVoiceStr.str }}</span>
            </template>
            <div class="timbre_selection" @click="audioSelection.showModal()">
              <div class="timbre_selection_cart_left">
                <strong>
                  <!-- 选择了 一项 或多项 -->
                  {{ selectVoiceStr.str }}
                </strong>
              </div>
              <div class="timbre_selection_cart_right">
                <cu-icon type="icon-qiehuan"> </cu-icon>
              </div>
            </div>
          </a-tooltip>

        </div>
        <!-- 音量调整 -->
        <div class="font_setting_item" style="margin-top: 20px">
          <span class="font_setting_item_title">音量调整</span>
          <div class="volume_adjust">
            <a-slider class="slider" :min="1" :max="10" id="test" :step="1" v-model:value="volume" />
          </div>
        </div>

        <!-- 语速调整 -->
        <div class="font_setting_item" style="margin-top: 20px">
          <span class="font_setting_item_title">语速调整</span>
          <div class="volume_adjust">
            <a-slider class="slider" :min="-2" :max="2" id="test" :step="0.1" v-model:value="speed" />
          </div>
        </div>

        <!-- 情感 -->
        <div class="font_setting_item" style="margin-top: 20px">
          <span class="font_setting_item_title">情感调整</span>
          <div class="volume_adjust">
            <a-slider class="slider" :min="50" :max="200" id="test" :step="1" v-model:value="emotion_intensity" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 小标题字体颜色
@font_color: #42464e;

.FontStyleComponent {
  // padding: 16px;
  min-height: 270px;

  .font_settings_content {
    border: 1px solid #e8e8e8;
    // overflow: hidden;
    padding: 16px;

    .title {
      display: flex;
      justify-content: space-between;

      span {
        font-size: 13px;
        font-weight: 600;
        color: #1e1c23;
      }
    }

    // 字体样式设置
    .font_setting {
      margin-top: 10px;

      .font_setting_item {
        display: flex;
        position: relative;
        align-items: center;

        // 标题
        .font_setting_item_title {
          color: @font_color;
          font-size: 13px;
          padding-right: 15px;
          // padding-top: 10px;
          min-width: 67px;
        }

        // 时间设置标题
        .font_style_title {
          color: @font_color;
          font-size: 13px;
          padding-right: 15px;
          display: flex;
          // justify-content: start;
          align-self: flex-start;
          // 一行显示
          white-space: nowrap;
        }

        // 花字设置
        .font_style_box {

          // display: flex;
          .font_style_content_box {
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            overflow: hidden;

            .font_style_content_item {
              border: 1px solid #ededee;
              cursor: pointer;
              border-radius: 8px;

              &:hover {
                border-color: #1664ff;
                background-color: #f4f6f5;
              }
            }

            .active_font_style {
              border-color: #1664ff;
            }

            // 禁用
            .font_disabled {
              width: 51px;
              font-size: 32px;
              text-align: center;
            }
          }

          // 折叠按钮
          .folding_panel {
            color: #737a87;
            text-align: center;
            width: 100%;
            display: block;
            cursor: pointer;
            margin-top: 15px;
          }
        }

        // 字体设置
        .font_setting_box {
          flex: 1;
          max-width: 560px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background-color: #f6f8fa;
          overflow-x: auto;
          overflow-y: hidden;

          &::-webkit-scrollbar {
            height: 4px;
            /* 滚动条的高度，垂直滚动条可能用得上 */
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          // 选择字体气泡框
          :deep(.ant-popover-inner-content) {
            padding: 0px;
          }

          // 字体大小数字input
          :deep(.ant-input-number) {
            background-color: transparent;
            border: none;
            width: 56px;
          }

          :deep(.ant-input-number-input) {
            text-align: center;
          }

          :deep(.zs-color-picker-panel) {
            margin-top: 16px;
            left: 0px;
          }

          .select_font_box {
            display: flex;
            flex-direction: column;
            height: 400px;
            overflow-y: auto;
            padding-right: 4px;

            &:hover {
              padding-right: 0;

              &::-webkit-scrollbar {
                display: block;
              }
            }

            &::-webkit-scrollbar {
              width: 4px;
              /* 滚动条的宽度 */
              height: 10px;
              /* 滚动条的高度，垂直滚动条可能用得上 */
              display: none;
            }

            &::-webkit-scrollbar-thumb {
              background: #888;
              /* 滑块的背景颜色 */
              border-radius: 10px;
              /* 滑块的圆角 */
            }

            .select_font_item {
              padding: 8px 16px;
              cursor: pointer;
              min-width: 157px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              &:hover {
                background-color: #eeefef;
              }
            }

            .font_active {
              font-weight: 600;
            }
          }

          .font_settings_style {
            cursor: pointer;
            color: #0c0d0e;
            margin: 0 5px;
            padding: 3px;
            display: flex;
            align-items: center;

            span {
              max-width: 70px;
              margin-right: 5px;
              font-size: 13px;
              // 不换行
              white-space: nowrap;
              // 省略号
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &:hover {
              background-color: #eeefef;
            }
          }

          // 字体大小
          .font_settings_size {
            margin: 0 5px;
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;

            &:hover {
              background-color: #eeefef;
            }

            .change_btn {
              cursor: pointer;
              padding: 0 10px;
              color: @font_color;
              -webkit-user-select: none;
              /* Safari, Chrome 和 Opera */
              -moz-user-select: none;
              /* Firefox */
              -ms-user-select: none;
              /* Internet Explorer/Edge */
              user-select: none;
              /* 非前缀的版本, 应用于所有现代浏览器 */
            }
          }

          // 分割线
          .split_line {
            margin: 0 10px;
            height: 20px;
            width: 1px;
            background-color: #e2e2e2;
          }

          // 字体颜色和背景色
          .color_settings_box {
            display: flex;
            gap: 7px;

            .settings_color {
              display: flex;
              flex-direction: column;
              // justify-content: center;
              align-items: center;
              padding: 5px 7px;
              position: relative;

              &:hover {
                background-color: #eeefef;
                cursor: pointer;
              }

              .color_line {
                height: 2px;
                width: 60%;
                background-color: #000;
                position: absolute;
                bottom: 0px;
                left: calc(50% - 30%);
              }
            }
          }

          // 字体粗细倾斜和排列方式
          .font_settings_style_control {
            display: flex;
            align-items: center;
            gap: 10px;

            // 设置气泡框样式
            :deep(.ant-popover-inner-content) {
              padding: 0px;
            }

            .select_alignment {
              display: flex;

              span {
                padding: 5px;
                cursor: pointer;

                &:hover {
                  background-color: #eeefef;
                }
              }

              .active_alignment {
                background-color: #eeefef;
              }
            }

            .font_settings_style_itme {
              padding: 2px 7px;
              cursor: pointer;

              &:hover {
                background-color: #eeefef;
              }
            }

            .alignment {
              display: flex;
              padding: 4px;
            }
          }
        }

        // 配音设置
        .setting_time {
          // 去除input默认样式
          border: 1px solid #e2e2e2;
          display: flex;
          align-items: center;

          // .clear_btn{
          //         position: absolute;
          //          left: -30px;
          //           z-index: 99;
          //            top: 3px;
          //     }
          :deep(.ant-input-number-group-addon) {
            border: none;
            background-color: transparent;
            // padding: 3px 6px;
            // display: flex;
            // align-items: center;
            // justify-content: center;
          }

          :deep(.ant-input-number-input) {
            border: none;
            padding: none;
          }

          :deep(.ant-input-number) {
            border: none;

            &:hover {
              border: none;
            }
          }

          :deep(.ant-input-number-focused) {
            box-shadow: none;
          }

          :deep(.ant-input-number-handler) {
            border-right: 1px solid #d9d9d9;
          }
        }

        // 聚焦的样式
        .focus_input {
          border-color: #1890ff;
        }

        // 音色选择卡片
        .timbre_selection {
          cursor: pointer;
          width: 284px;
          border-radius: 4px;
          background: rgb(246, 248, 250);
          border: 1px solid rgba(0, 0, 0, 0.05);
          padding: 12px;
          display: flex;
          justify-content: space-between;

          .timbre_selection_cart_left {
            display: flex;
            align-items: center;

            img {
              width: 37px;
              margin-right: 12px;
            }

            strong {
              color: @font_color;
              display: -webkit-box;
              /* 设置为弹性盒子模型 */
              -webkit-box-orient: vertical;
              /* 垂直排列子元素 */
              -webkit-line-clamp: 2;
              /* 限制显示两行 */
              overflow: hidden;
              /* 超出内容隐藏 */
              text-overflow: ellipsis;
              /* 超出内容显示省略号 */
            }
          }

          .timbre_selection_cart_right {
            display: flex;
            align-items: center;
            justify-content: center;
            color: @font_color;
            font-size: 17px;
            width: 38px;

            &:hover {
              background-color: #eeefef;
            }
          }
        }

        // 音量调整
        .volume_adjust {
          width: 254px;

          // 修改标点的样式
          :deep(.ant-slider-dot) {}
        }
      }
    }
  }
}
</style>
